<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('项目管理')"/>
    <th:block th:include="include :: select2-css"/>
    <style>
        .sortable-ghost {
            opacity: 0.4;
            background-color: #F4E2C9;
        }

        .block__list li {
            cursor: pointer;



        }

        .block__list{
            list-style: none;
            margin:0;
            padding:0;
        }
        .block__list li{
            width:auto;
            margin:0 2px;
            float: left;
            background:#d7d7dd;
            border-radius: 5px;

        }


    </style>
</head>
<body class="gray-bg">
<div class="container-div">
    <div class="col-sm-12 search-collapse">
        <form id="data-form">
            <input name="trainPackageId" id="trainPackageId" th:value="${trainPackageId}" type="hidden"/>
        </form>
    </div>
    <div class="row">
        <div class="btn-group-sm" id="toolbar" role="group">
            <a class="btn btn-success" onclick="addSubject()">
                <i class="fa fa-plus"></i>新增题库
            </a>
        </div>
        <div class="col-sm-12 select-table table-striped">
            <table id="bootstrap-table"></table>
        </div>
    </div>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: select2-js"/>
<script th:src="@{/js/sortable.js}"></script>
<script th:inline="javascript">
    // 权限

    // 字典
    var prefix = ctx + "business/trainPackageProject";
    $(function () {
        var options = {
            url: prefix + "/list",
            removeUrl: prefix + "/remove",
            modalName: "数据",
            onLoadSuccess: onLoadSuccess,
            columns: [
                {
                    field: 'id',
                    title: '题库编号',
                },
                {
                    field: 'subjectName',
                    title: '题库名称',
                },
                {
                    field: 'projectName',
                    title: '项目名称/操作方式',
                    formatter: function (value, row, index) {
                        var actions = [];
                        if(value !=null){
                            actions.push('<ul class="block__list block__list_words" title="'+row.id+'">');
                            var projectName = value.split(',');
                            var projectCode = row.projectCode.split(',');
                            for(var i in projectName){
                                actions.push('<li title="'+projectCode[i]+'">'+projectName[i]+'</li>');
                            }
                            actions.push('</ul>');
                        }
                        return actions.join('');
                    }
                },
                {
                    field: 'updateTime',
                    title: '最后编辑时间',
                },
                {
                    field: 'updateUser',
                    title: '编辑人',
                },
                {
                    title: '操作',
                    align: 'center',
                    formatter: function (value, row, index) {
                        var actions = [];
                        actions.push('<a class="btn btn-success btn-xs " href="javascript:void(0)" onclick="editProject(\'' + row.id + '\')"><i class="fa fa-edit"></i>增加项目/操作方式</a> ');
                        actions.push('<a class="btn btn-danger btn-xs " href="javascript:void(0)" onclick="$.operate.remove(\'' + row.id + '\')"><i class="fa fa-remove"></i>删除</a> ');
                        return actions.join('');
                    }
                }]
        };
        $.table.init(options);

    });

    function onLoadSuccess(data){
        var tempObj= document.querySelectorAll('.block__list');
        // console.log(tempObj)
        for(var i=0;i<tempObj.length;i++){
            Sortable.create(tempObj[i], {
                animation: 150, //动画参数
                onEnd: function (evt) { //拖拽完毕之后发生该事件
                    // console.log('onEnd.foo:', [evt.item, evt.from]);
                    var id=evt.from.title;
                    var projectCode=[];
                    for(var j=0;j<evt.from.children.length;j++){
                        projectCode.push(evt.from.children[j].title)
                    }
                    var reqData={
                        "trainPackageId":id,
                        "projectCodes":projectCode
                    }
                    $.ajax({
                        url: prefix + "/sortProject",
                        type: 'POST',
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        data: JSON.stringify(reqData),
                        error: function (request) {
                            $.modal.alertError("系统错误");
                        },
                        success: function (data) {
                            $.table.refresh();
                        }
                    });

                }
            });
        }
    }
    function addSubject() {
        var url = prefix + "/add/" + $("#trainPackageId").val();
        $.modal.open("增加题库", url);
    }
    function editProject(id) {
        var url = ctx + "business/trainPackageProject/checkTrainProject/" + id;
        $.modal.open("增加项目/操作方式", url);
        $.table.refresh();
    }
</script>
</body>

</html>